import React from 'react';
import { StyleSheet, Text, View, Image, TouchableWithoutFeedback, StatusBar } from 'react-native';
import { Shadow } from 'react-native-shadow-2';
import LinearGradinet from 'react-native-linear-gradient';
import { useDispatch } from "react-redux";

const Home = ({ navigation }) => {

  const dispatch = useDispatch()

  const recovery = () => {
    dispatch({ type: "setLockVisible", value: false });
    navigation.navigate("recovery-prompt")
  }

  const create = () => {
    dispatch({ type: "setLockVisible", value: false });
    navigation.navigate("create-prompt")
  }

  return (
    <View style={styles.container}>
      <StatusBar backgroundColor='#5662EA' barStyle='light-content' />
      <LinearGradinet
        start={{ x: 0, y: 0 }}
        end={{ x: 0, y: 1 }}
        colors={['#5662EA', '#0A134B']}
        style={{ width: "100%", height: "100%", position: "relative" }}
      >
        <View style={styles.indextitle}>
          <Image source={require("@/assets/imgs/logo.png")} style={{ height: 15, width: 15 }} ></Image>
          <Text style={styles.titletext}>Sectoken</Text>
        </View>
        <View style={styles.indeximg}>
          <Image source={require("@/assets/imgs/p_one.png")} style={{ height: 281, width: 269 }}></Image>
        </View>
        <View style={styles.indexbottom}>
          <Shadow offset={[0, 2]}
            distance={0} startColor='rgba(0,0,0,0.1600)' finalColor='transparent'>
            <View style={styles.bottominner}>
              <TouchableWithoutFeedback onPress={create}>
                <View style={styles.innertop} >
                  <View>
                    <Text style={{ fontSize: 13, color: "#040256" }}>Create Wallet</Text>
                    <Text style={{ fontSize: 11, color: "#0C75FF" }}>First use of wallet</Text>
                  </View>
                  <Image source={require("@/assets/imgs/next.png")} style={{ height: 15, width: 15 }}></Image>
                </View>
              </TouchableWithoutFeedback>
              <TouchableWithoutFeedback onPress={recovery}>
                <View style={styles.innerbottom}>
                  <View>
                    <Text style={{ fontSize: 13, color: "#040256" }}>Restore Wallet</Text>
                    <Text style={{ fontSize: 11, color: "#7E7E7E" }}>Restore your wallet</Text>
                  </View>
                  <Image source={require("@/assets/imgs/next.png")} style={{ height: 15, width: 15 }}></Image>
                </View>
              </TouchableWithoutFeedback>
            </View>
          </Shadow>
          <View style={styles.bottombottom}></View>
        </View>
      </LinearGradinet >
    </View >
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: "relative",
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: "center"
  },
  indextitle: {
    flexDirection: 'row',
    position: "absolute",
    alignItems: "center",
    left: 25,
    top: 25
  },
  titletext: {
    fontSize: 14,
    color: "#fff",
    fontWeight: 'bold',
    marginLeft: 2
  },
  indeximg: {
    flexDirection: 'row',
    justifyContent: "center",
    marginTop: 99
  },
  indexbottom: {
    width: "100%",
    flexDirection: "row",
    justifyContent: 'center',
    position: "absolute",
    bottom: 100
  },
  bottominner: {
    height: 136,
    width: 324,
    backgroundColor: "#ffff",
    borderRadius: 5,
    position: "relative",
    zIndex: 20
  },
  innertop: {
    height: "50%",
    width: "100%",
    paddingLeft: 13,
    paddingRight: 13,
    flexDirection: 'row',
    alignItems: "center",
    borderBottomColor: "#cfcfcf",
    borderStyle: "dashed",
    borderBottomWidth: 1,
    justifyContent: "space-between"
  },
  innerbottom: {
    height: "50%",
    width: "100%",
    paddingLeft: 13,
    paddingRight: 13,
    flexDirection: 'row',
    alignItems: "center",
    justifyContent: "space-between"
  },
  bottombottom: {
    height: 40,
    width: 300,
    backgroundColor: "#cfcfcf ",
    position: "absolute",
    bottom: -8,
    zIndex: 10,
    borderRadius: 10
  }
})

export default Home